<template>
  <view class="container">

    <view class="layout">
      <view class="">
        <uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
      </view>
      <view class="box" v-for="(item,index) in pets" :key="item.id">
        <view class="pic">
          <image :src="item.url" mode="widthFix" @click="onPreview(index)" lazy-load="true"></image>
        </view>
        <view class="text">{{item.content}}</view>
        <view class="author" v-if="item.author">
          ——{{item.author}}
        </view>
      </view>
    </view>

    <view class="float">
      <view class="item" @click="onRefresh">
        <uni-icons type="refreshempty" size="26"></uni-icons>
      </view>
      <view class="item" @click="onTop">
        <uni-icons type="arrow-up" size="26"></uni-icons>
      </view>
    </view>

    <view class="reLoading">
      <uni-load-more status="loading"></uni-load-more>
    </view>



  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
    computed
  } from 'vue'
  import {
    onReachBottom
  } from "@dcloudio/uni-app"
  // 数据
  let pets = ref([]);
  let name = ref("petShow");
  const current = ref(0)
  const classify = [{key:"petShow",value:'萌宠'},{key:"taoShow",value:'美图'}]
  const values = computed(()=>classify.map(item=>item.value))
  
  // 方法

  // 点击菜单
  function onClickItem(e) {
    // console.log(e.currentIndex)
    current.value = e.currentIndex
    // console.log(current.value)
    pets.value = []
    name.value = classify[current.value].key
    console.log(name.value)
    network(name.value)
  }
  // 图片预览
  function onPreview(index) {
    // console.log(index)
    let urls = pets.value.map(item => item.url)
    uni.previewImage({
      current: index,
      urls: urls
    })
  }
  // 发生网络请求
  function network(res) {
    name.value = res
    uni.request({
      url: "https://tea.qingnian8.com/tools/" + res,
      data: {
        size: 5
      }
    }).then(res => {
      if (res.data.errCode === 0) {
        // console.log(res.data)
        pets.value = [...pets.value, ...res.data.data]
      } else if (res.data.errCode === 400) {
        uni.showToast({
          title: res.data.errMsg,
          icon: "none"
        })
      }
    }).catch(err => {
      // console.log(err)
      uni.showToast({
        title: "请求有误，请重新刷新",
        icon: "none"
      })
    }).finally(() => {
      // console.log(123)
      uni.hideNavigationBarLoading();
      uni.stopPullDownRefresh();
    })
  }
  // network(name.value)
  // 刷新
  function onRefresh() {
    console.log("刷新")
    uni.startPullDownRefresh();
  }
  // 返回顶部
  function onTop() {
    // console.log("顶部")
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  }

  // 生命周期
  onLoad(() => {
    network("petShow")
    uni.showNavigationBarLoading()
  })
  // 触底加载更多
  onReachBottom(() => {
    network(name.value)
  })
  // 下拉刷新
  onPullDownRefresh(() => {
    // console.log("下拉刷新")
    pets.value = []
    network(name.value)
  })
</script>

<style lang="scss" scoped>
  .container {
    .layout {
      padding: 50rpx;

      

      .box {
        margin-bottom: 50rpx;
        box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
        border-radius: 10rpx;
        overflow: hidden;
        padding: 20rpx;

        .pic {
          image {
            width: 100%;
          }
        }

        .author {
          display: flex;
          justify-content: flex - end;
          color: gray;
        }

        .text {
          padding: 30rpx;

        }
      }
    }

    .float {
      position: fixed;
      right: 30rpx;
      bottom: 80rpx;
      padding-bottom: env(safe-area-inset-bottom);

      .item {
        width: 90rpx;
        height: 90rpx;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .reLoading {
      padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
    }
  }
</style>